<template>
  <!--通过变量isRed控制是否添加red类名-->
  <div v-bind:class="{red:state.isRed}">我是尼克陈</div>
  <!--单击事件，改变isRed变量的值-->
  <button @click="change">变红</button>
</template>
<script>
import {reactive}  from 'vue'
export default{
  setup(){
    const state=reactive({
      isRed:false //变量声明
    })
    //控制isRed变量的方法
    const change=()=>{
      state.isRed=true
    }
    //返回变量和方法
    return {state, change}
  }
}
</script>
<!--事先添加好样式-->
<style scoped>
  .red{
    color: red
  }
</style>